<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        /* 设置输入框样式 */
        /* input {
            width: 130px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            transition: 0.4s ease-in-out;
        } */

        /* 设置输入框聚焦时的样式 */
        /* input:focus {
            width: 100%;
            box-shadow: 0 0 18px rg/ba(102, 175, 233, .6);
            border-color: #66afe9; */
            /* 设置元素没有轮廓线 */
            /* outline: none;    */

        /* } */
        .INPUT{
              width: 130px;
              height: 30px;
              border-radius: 7px;

        }
        .INPUT:focus{                   
            width: 100%;
            transition: all 0.5s ease-in;

        }
    </style>

    <!-- 3.24 -->
     <input type="text" placeholder="请输入内容..." class="INPUT">


    <!-- <input type="text" name="search" placeholder="请输入搜索内容搜索.."> -->
    <p></p>
    <!-- display: inline-block;  行内元素变行内块元素 -->
    <span style="border: 1px solid red;width: 300px;height: 300px;display: inline-block;"></span>

    <!-- 点击事件 -->
    <p></p>
    <!-- onclick=> 鼠标点击的事件 点击鼠标 -->
    <button type="button" onclick="Fnbutton()">点我!</button>

    <p></p>
    <!-- 灯泡开关 -->
    <button type="button" onclick="lightbulb()">灯泡开关</button>

    <!-- 灯泡图片 -->
    <image id="myimage" src="https://www.runoob.com/images/pic_bulbon.gif" alt="" style="width: 180px;height: 300px;">

        <p><a href="mailto:111111@qq.com">邮箱</a></p>


        <script>

            let a = '987321'
            console.log(a.match('21'))
            //    document.write("<p style='border: 1px solid red;width: 300px;'>这是一个段落。</p>");
            //点击时间函数  触发函数
            function Fnbutton() {
                alert('欢迎软件测试')
            }

            //点击灯泡事件
            function lightbulb() {
                let element = document.getElementById('myimage')
                //  console.log(element)
                //  console.log(element.src.match('pic_bulbon'))
                if (element.src.match('pic_bulbon')) {
                    element.src = 'https://www.runoob.com/images/pic_bulboff.gif'
                } else {
                    element.src = 'https://www.runoob.com/images/pic_bulbon.gif'

                }
            }



        </script>
</body>

</html>